<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      background-color: orange;
      position: relative;

      overflow: auto;/*触发BFC,解决浮动高度塌陷*/
    }
    /* 
      为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢?
      ■事实上，BFC解决高度塌陷需要满足两个条件：
        口浮动元素的父元素触发BFC,形成独立的块级格式化上下文(Block Formatting Context);
        口浮动元素的父元素的高度是auto的；

      ■ BFC的高度是auto的情况下，是如下方法计算高度的
        口1.如果只有inline-level,是行高的顶部和底部的距离；
        口2.如果有block-level,是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
        口3.如果有绝对定位元素，将被忽略；
        口4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

    */
    .item {
      width: 400px;
      height: 200px;
      box-sizing: border-box;
      border: 1px solid #CAE8EA;
      float: left;
      background-color: #e62d3f;

      /* position: absolute; */
    }
  </style>
</head>
<body>
  
  <div class="container clear_fix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

</body>
</html>